<template>
	<view class="">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
						:duration="duration">
						<swiper-item v-for="(item,i) in imgList" :key="i">
							<image :src="item" mode="widthFix" style="width:100%;"></image>
						</swiper-item>
			</swiper>
			<!-- 分类 -->
					<view class="cate-section">
						<view class="cate-item">
							<image src="/static/temp/c3.png"></image>
							<text>环球美食</text>
						</view>
						<view class="cate-item">
							<image src="/static/temp/c5.png"></image>
							<text>个护美妆</text>
						</view>
						<view class="cate-item">
							<image src="/static/temp/c6.png"></image>
							<text>营养保健</text>
						</view>
						<view class="cate-item">
							<image src="/static/temp/c7.png"></image>
							<text>家居厨卫</text>
						</view>
						<view class="cate-item">
							<image src="/static/temp/c8.png"></image>
							<text>速食生鲜</text>
						</view>
					</view>
					<view class="ad-1">
						<image src="/static/temp/ad1.jpg" mode="scaleToFill"></image>
					</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				imgList:["https://cn.bing.com/th?id=OVFT.m5J8ReXxl_J4wZRhasaUzC&pid=News&w=120&h=80&c=14&rs=2&qlt=90","https://cn.bing.com/th?id=OVFT.ZYb5ThtBHgCj6zIk5WyXdi&pid=News&w=120&h=80&c=14&rs=2&qlt=90"]
			}
		}
	}
</script>

<style lang="scss">
	.cate-section {
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-wrap:wrap;
		padding: 30upx 22upx; 
		background: #fff;
		.cate-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: 26upx;
			color: #666;
		}
		/* 原图标颜色太深,不想改图了,所以加了透明度 */
		image {
			width: 88upx;
			height: 88upx;
			margin-bottom: 14upx;
			border-radius: 50%;
			opacity: .7;
			box-shadow: 4upx 4upx 20upx rgba(250, 67, 106, 0.3);
		}
	}
	.ad-1{
		width: 100%;
		height: 210upx;
		padding: 10upx 0;
		background: #fff;
		image{
			width:100%;
			height: 100%; 
		}
	}
</style>